import React from 'react';
import './ImageToolbar.css';

const tools = [
  { id: 'pan', name: '平移', icon: '✋', description: '鼠标左键拖拽移动图像' },
  { id: 'zoom', name: '缩放', icon: '🔍', description: '鼠标左键点击缩放或滚轮缩放' },
  { id: 'windowing', name: '窗宽窗位', icon: '🔆', description: '鼠标左键拖拽调整亮度对比度' },
  { id: 'pick', name: '灰度拾取', icon: '🎯', description: '鼠标悬停查看像素灰度值和坐标' },
  { id: 'reset', name: '重置', icon: '🔄', description: '重置视图到初始状态' }
];

const ImageToolbar = ({ currentTool, onToolChange, processingMethod = 'normal' }) => {
  // 动态工具列表：根据处理方法添加特殊工具
  const dynamicTools = [...tools];
  if (processingMethod === 'maximum_slope') {
    dynamicTools.push({
      id: 'arterial_input',
      name: '动脉输入点',
      icon: '🔴',
      description: '点击图像标记动脉输入点（最大斜率法需要）'
    });
  }

  console.log('ImageToolbar渲染:', { processingMethod, toolsCount: dynamicTools.length, currentTool });

  return (
    <div className="image-toolbar">
      <div className="toolbar-tools">
        {dynamicTools.map(tool => (
          <button
            key={tool.id}
            className={`toolbar-btn ${currentTool === tool.id ? 'active' : ''}`}
            onClick={() => {
              console.log('工具点击:', tool.id);
              onToolChange(tool.id);
            }}
            title={tool.description}
            data-tool={tool.id}
          >
            <span className="toolbar-icon">{tool.icon}</span>
            <span className="toolbar-name">{tool.name}</span>
          </button>
        ))}
      </div>
      
      <div className="toolbar-info">
        <span className="current-tool">
          当前工具: {dynamicTools.find(t => t.id === currentTool)?.name || '未选择'}
        </span>
      </div>
    </div>
  );
};

export default ImageToolbar; 